<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width">
    <style>
	body {
	  margin: 0;
	  height: 100vh;
	  width: 100vw;
	}

	.background {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 100vh;
	  width: 100vw;
	  background-image: url("");
	  background-size: cover;
	}

	.background .water {
	  position: absolute;
	  background-image: url("");
	  top:0;
	  left:0;
	  height: 100%;
	  width: 100%;
	  filter: url("#turbulence");
	  background-size: cover;
	}
	</style>
  </head>
  <body>

    <div class="background">
      <div class="water"></div>
    </div>
    
    <svg>
      <filter id="turbulence" x="0" y="0" width="100%" height="100%">
        <feTurbulence id="sea-filter" numOctaves="2" seed="1" baseFrequency="0.02 0.05"></feTurbulence>
        <feDisplacementMap scale="10" in="SourceGraphic"></feDisplacementMap>
        <animate xlink:href="#sea-filter" attributeName="baseFrequency" dur="90s" 
        keyTimes="0;0.5;1" values="0.02 0.06;0.04 0.08;0.02 0.06" repeatCount="indefinite"/>
      </filter>
    </svg>

  </body>
</html>
